<script lang="ts" setup>
	import { ref } from "vue"
	import { config } from "@/config/axios/config"
	import { CourseApi } from '@/api/course';
	import { message, type UploadProps } from 'ant-design-vue';
	import { usePopupStore } from '@/stores/popup'
	import { useUserStore } from '@/stores/user';
	import { PlusOutlined } from '@ant-design/icons-vue';
	let course = ref({
		title: "",
		synopsis: "",
		duration: "",
		cover: "",
		chapter: "",
	})

	const userStore = useUserStore()
	const usePopup = usePopupStore()
	let exit = (type : string) => {
		usePopup.setPopup(type)
		course.value = {
			title: "",
			synopsis: "",
			duration: "",
			cover: "",
			chapter: "",
		}
	}
	const previewVisible = ref(false);
	const previewImage = ref('');
	const previewTitle = ref('');

	const fileList = ref<any>([]);

	const handleCancel = () => {
		previewVisible.value = false;
		previewTitle.value = '';
	};
	function getBase64(file : File) {
		return new Promise((resolve, reject) => {
			const reader = new FileReader();
			reader.readAsDataURL(file);
			reader.onload = () => resolve(reader.result);
			reader.onerror = error => reject(error);
		});
	}
	const handlePreview = async (file : any) => {
		if (!file.url && !file.preview) {
			file.preview = (await getBase64(file.originFileObj)) as string;
		}
		previewImage.value = file.url || file.preview;
		previewVisible.value = true;
		previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
	};

	const submit = () => {
		for (let file of fileList.value) {
			course.value.cover = file.response.data.replace(config.baseUrl, "");
		}
		if (course.value.title.length == 0) {
			message.error('课程名称不能为空');
			return false
		}
		if (course.value.synopsis.length == 0) {
			message.error('简介不能为空');
			return false
		}
		if (course.value.cover == "") {
			message.error('请添加课程封面');
			return false
		}
		if (course.value.duration == "") {
			message.error('课程时长不能为空');
			return false
		}
		if (course.value.chapter == "") {
			message.error('课程章节不能为空');
			return false
		}
		CourseApi.addCourse({
			...course.value
		}).then((res : any) => {
			if (res.code == 1) {
				message.success(res.message);
				exit('')
			} else if (res.code == 0) {
				message.error(res.message);
			}
		})
	}
</script>

<template>
	<a-modal :open="true" :footer="null" @cancel="exit('')" centered width="600px">
		<div class="content">
			<div class="title">
				<div class="line"></div>发布课程
			</div>
			<div class="info-box">
				<div class="item">
					<div class="lebel">
						<span>*</span>名称：
					</div>
					<div class="text">
						<input type="text" v-model="course.title" placeholder="请输入课程名称" class="input" />
					</div>
				</div>
				<div class="item">
					<div class="lebel">
						<span>*</span>时长：
					</div>
					<div class="text">
						<input type="text" v-model="course.duration" placeholder="请输入时长" class="input input-width" />
					</div>
				</div>
				<div class="item">
					<div class="lebel">
						<span>*</span>章节：
					</div>
					<div class="text">
						<input type="number" v-model="course.chapter" placeholder="请输入章节" class="input input-width" />
					</div>
				</div>
				<div class="item">
					<div class="lebel">
						<span>*</span>简介：
					</div>
					<div class="text">
						<a-textarea class="textarea" :rows="4" v-model:value="course.synopsis" placeholder="请输入简介" />
					</div>
				</div>
				<div class="item img-item">
					<div class="lebel">
						<span>*</span>封面：
					</div>
					<div class="text">
						<a-upload v-model:file-list="fileList" :action="config.baseUrl+'/api/uploadFile'"
							list-type="picture-card" @preview="handlePreview">
							<div
								v-if="fileList.length < 1">
								<plus-outlined />
								<div style="margin-top: 8px">上传图片</div>
							</div>
						</a-upload>
						<a-modal :open="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
							<img alt="example" style="width: 100%" :src="previewImage" />
						</a-modal>
					</div>
				</div>
			</div>
			<div class="btn-box">
				<a-button type="primary" class="btn" @click="submit">
					保存
				</a-button>
				<a-button type="default" class="btn" @click="exit('')">
					取消
				</a-button>
			</div>
		</div>
	</a-modal>
</template>

<style lang="scss" scoped>
	.ant-modal-content {
		padding: 0;
	}

	.content {
		padding: 0 20px;

		.title {
			font-size: 18px;
			padding-bottom: 15px;
			border-bottom: 1px solid #ccc;
			display: flex;
			align-items: center;
			font-weight: bold;
			.line {
				border-radius: 4px;
				width: 4px;
				height: 20px;
				background-color: #1677ff;
				margin-right: 8px;
			}
		}

		.info-box {
			margin-top: 20px;
			display: flex;
			flex-wrap: wrap;

			.item {
				margin-top: 20px;
				display: flex;
				align-items: center;

				.lebel {
					margin-right: 10px;
					width: 50px;
					text-align: right;

					span {
						color: red;
					}
				}

				.text {
					flex: 1;

					.textarea {
						margin-top: 10px;
						width: 400px;
					}

					.input {
						width: 400px;
						height: 40px;
						border: solid 1px #d9d9d9;
						border-radius: 6px;
						font-size: 14px;
					}

					.input-width {
						width: 150px;
						margin-right: 40px;
					}

					.input:focus {
						box-shadow: 0 0 0 2px rgb(5, 145, 255, 10%);
						border-color: #4096ff;
					}

					.input:hover {
						border-color: #4096ff;
					}

					::placeholder {
						color: #bfbfbf;
						font-size: 14px;
					}
				}
			}

			.img-item {
				min-width: 600px;
			}
		}

		.btn-box {
			margin-top: 30px;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn {
				margin: 0 20px;
			}
		}

	}
</style>